<template>
  <div id="main"></div>
</template>

<script>
import { defineComponent, onMounted, ref } from "@vue/runtime-core";
import * as echarts from "echarts";
import store from "../../../store/index";
export default defineComponent({
  setup() {
    const init = () => {
      let chartDom = document.getElementById("main");
      let myChart = echarts.init(chartDom);
    
      var data=showData.value
      let option = {
        color: [
          "#04B9FF",
          "#5DBD32",
          "#FFC809",
          "#F46E36",
          "#8378EA",
          "#E7BCF3",
          "#9D96F5",
        ],

        backgroundColor: "#364686",
        grid: {
          bottom: 150,
          left: 100,
          right: "10%",
        },
        legend: {
          orient: "vertical",
          top: "35%",
          right:"5%",
          textStyle: {
            color: "#f2f2f2",
            fontSize: 20,
          },
          icon: "roundRect",
          data: data,
        },
        series: [
          // 主要展示层的
          {
            radius: ["30%", "61%"],
            center: ["39%", "50%"],
            type: "pie",
            label: {
              normal: {
                show: true,
                formatter: "{b}: {@2012} ({d}%)", //??
                textStyle: {
                  fontSize: 20,
                },
                position: "outside",
              },
              emphasis: {
                show: true,
              },
            },
            labelLine: {
              normal: {
                show: true,
                length: 30,
                length2: 55,
              },
              emphasis: {
                show: true,
              },
            },
            data: data,
          },
        ],
      };
      myChart.setOption(option);

      option && myChart.setOption(option);
    };
  
    let showData = ref([]); //处理后的数据data
    let list = ref([]);
    onMounted(async () => {
      await store.dispatch("getCustomerInfo");
      list.value = store.state.customerInfo.list;
     
      //按属性对obj分类
      function groupBy(objectArray, property) {
        return objectArray.reduce(function (acc, obj) {
          let key = obj[property];
          if (!acc[key]) {
            acc[key] = [];
          }
          acc[key].push(obj);
          return acc;
        }, {});
      }
      let groupedCusType = groupBy(list.value, "cusType");
      console.log("groupedCusType ", groupedCusType);

      //遍历对象 属性
      for (let key in groupedCusType) {
        if (key == 0) {
          // name:'潜在客户",value:groupedCusType[0].length
          showData.value.push({
            name: "潜在客户",
            value: groupedCusType[key].length,
          });
        } else if (key == 1) {
          showData.value.push({
            name: "意向客户",
            value: groupedCusType[key].length,
          });
        } else if (key == 2) {
          showData.value.push({
            name: "真正客户",
            value: groupedCusType[key].length,
          });
        } else {
          showData.value.push({
            name: "历史客户",
            value: groupedCusType[key].length,
          });
        }
      }
      console.log('showdata',showData.value);
      init();
    });
    return {};
  },
});
</script>

<style lang='less' scoped>
#main {
  width: 100%;
  height: 100%;
}
</style>